import React from 'react';
import {Table, Popconfirm, Button, Card} from 'antd';
import PropTypes from 'prop-types';

const VoteList = ({votes, onClickDetail, onClickModify, handleAddVote, handlePageChange}) => {
  const buttonStyle = {
    margin: '0 8px 0 0'
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: '投票主题名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '开始日期',
      dataIndex: 'start_time',
      key: 'start_time'
    }, {
      title: '截止日期',
      dataIndex: 'end_time',
      key: 'end_time'
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'operation',
      render: (text, record, index) => {
        return (
          <div>
            <Button ghost={true} onClick={() => onClickDetail(record.id)} type="primary" icon="inbox"/>
            <Button ghost={true} onClick={() => onClickModify(record.id)} type="primary" icon="edit"/>
          </div>
        );
      },
    }
  ];

  const pagination = {
    total: votes.total,
    onChange: (page, pageSize)=> {
      handlePageChange(page, pageSize);
    }
  };

  return (
    <Card title="投票列表" extra={<a onClick={() => handleAddVote()}>新增</a>}>
      <Table
        loading={votes.loading}
        dataSource={votes.list}
        columns={columns}
        pagination={pagination}
      />
    </Card>
  );
};

VoteList.propTypes = {
  votes: PropTypes.object.isRequired,
  onClickDetail: PropTypes.func.isRequired,
  onClickModify: PropTypes.func.isRequired,
  handleAddVote: PropTypes.func.isRequired,
  handlePageChange: PropTypes.func.isRequired,
};

export default VoteList;
